<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">obj.msg</div>
    <script>
    // 模拟 Vue 中的data
     const obj = {
         msg:"hello",
         count: 10
     }
     // 模拟 Vue实例
     let vm = new Proxy(obj,{
        get(target,key){
           console.log(target, key)
           return target[key]
        },
        set(target,key,newValue){
            console.log(target,key,newValue)
            if(target[key] === newValue){
                return 
            }
            target[key] = newValue
            document.querySelector("#app").textContent = target[key]
        }
    })
    vm.msg = "word"
    console.log(vm.msg)
    //  const vm = {}
    //  proxyData(obj)
    //  function proxyData(data){
    //     Object.keys(data).forEach((key)=>{
    //         Object.defineProperty(vm,key,{
    //             // 可枚举（可遍历）
    //             enumerable: true,
    //             // 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
    //             configurable: true,
    //             get(){
    //                 console.log('get',data[key])
    //                 return data[key]
    //             },
    //             set(newValue){
    //                 console.log('set',newValue)
    //                 if(newValue === data[key]){
    //                     return 
    //                 }
    //                 data[key] = newValue
    //             }
    //         })
    //     })
        
    //  }
    
    </script>
</body>
</html>